<template>
  <el-container style="height: 100%">
    <el-header height="350px">
      <el-table :data="tableData" stripe @current-change="loadDetail" height="100%">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, tableColumns)
            }
          "
        />
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="currentDetail" stripe height="100%">
        <el-table-column
          v-for="column in material_storage_policy_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, material_storage_policy_define)
            }
          "
        />
      </el-table>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { material_define, material_storage_policy_define } from '@/meta/index'
import type { bd_material, bd_material_storage_policy } from '@/types/basedata'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { onMounted, ref } from 'vue'
import { useDbStore } from '@/stores/modules/database'
const dbStore = useDbStore()
const currentDetail = ref<bd_material_storage_policy[]>()
const tableColumns = material_define
const tableData = ref<bd_material[]>()
const loadDetail = (val: bd_material) => {
  fill_ref_info(val.storage_policy, material_storage_policy_define)
    .then(() => {
      currentDetail.value = val.storage_policy
    })
    .catch(() => {
      console.log('err')
    })
}
onMounted(() => {
  const tmp = dbStore.material
  fill_ref_info(tmp, material_define)
    .then(() => {
      tableData.value = tmp
      loadDetail(tmp[0])
    })
    .catch(() => {
      console.log('err')
    })
})
</script>
